<template>
    <div class="smartbuild">
        <div>
            <quanxiandangyuan></quanxiandangyuan>
        </div>
        <div>
            <dangyuanfenbu></dangyuanfenbu>
        </div>
        <div>
            <dangyuanganbu></dangyuanganbu>
        </div>
        <div class="right">
            <div>
                <div>
                    <dangzhibushuliang></dangzhibushuliang>
                </div>
                <div>
                    <dangjianzixun></dangjianzixun>
                </div>
                <div>
                    <xiajidangzuzhihuodongleixing></xiajidangzuzhihuodongleixing>
                </div>
            </div>
            <div>
                <xiajidangzuzhihuodong></xiajidangzuzhihuodong>
            </div>
        </div>
    </div>
</template>

<script>
    import quanxiandangyuan from "./quanxiandangyuan"
    import dangyuanganbu from "./dangyuanganbu"
    import dangzhibushuliang from "./dangzhibushuliang"
    import dangjianzixun from "./dangjianzixun"
    import xiajidangzuzhihuodongleixing from "./xiajidangzuzhihuodongleixing"
    import xiajidangzuzhihuodong from "./xiajidangzuzhihuodong"
    import dangyuanfenbu from "./dangyuanfenbu"



    export default {
        name: "smartbuild",
        components: {
            quanxiandangyuan,
            dangyuanganbu,
            dangzhibushuliang,
            dangjianzixun,
            xiajidangzuzhihuodongleixing,
            xiajidangzuzhihuodong,
            dangyuanfenbu

        },
        data() {
            return {}
        }
    };
</script>
<style lang="scss" scoped>
    .smartbuild {
        height: 100%;
        width: 100%;
        padding: 40px;
        display: flex;

        > div {
            margin: 0 20px;
            &:nth-of-type(1) {
                width: 15%;
            }
            &:nth-of-type(2) {
                width: 15%;
            }
            &:nth-of-type(3) {
                width: 24%;
            }
            &:nth-of-type(4) {
                width: 46%;
                display: flex;
                flex-direction: column;

                >div{
                    flex:1;


                    &:first-child{
                        display: flex;
                        >div{
                            &:nth-of-type(1){
                                width: 20%;
                            }
                            &:nth-of-type(2){
                                width: 50%;
                                margin: 0 20px;
                            }
                            &:nth-of-type(3){
                                width: 30%;
                            }
                        }
                    }
                    &:last-child{
                        margin-top: 20px;
                    }
                }
            }

        }
    }
</style>
